<!--奖金测算-机构测算-机构测算配置-->
<template>
  <basic-container class="bonus">
    <flexible :leftCols="leftCols" :removeHeight="110" ref="flexibleRef">
      <template slot="left">
        <div class="search-form flex-l-r">
          <el-form :inline="true" class="flex">
            <el-form-item label="负责部门">
              <el-select v-model="deptId" placeholder="请选择负责部门"   @change="switchDepartment" :clearable="false" style="width: 400px">
                <el-option v-for="(item,index) in fzbmData" :key="index" :label="item.deptName"
                           :value="item.deptId"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-button type="primary" plain @click="handleSubmit">保存</el-button>
        </div>
        <el-form :model="formData" ref="formRef">
         <el-table
          v-loading="loading"
          :data="formData.tableData"
          class="edit-table count"
          border
          @selection-change="handleSelectionChange"
          header-align="center"
          :header-cell-style="{ background: '#f2f2f2', color: '#000' }"
          height="calc(100vh - 220px)"
          ref="tableRef"
          highlight-current-row
        >
           <el-table-column type="selection"  width="55" align="center" header-align="center">
           </el-table-column>
          <el-table-column width="55" label="序号" align="center" header-align="center">
            <template slot-scope="scope">
               <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="post" show-overflow-tooltip label="岗位" align="center" header-align="center" min-width="140">
          </el-table-column>
           <el-table-column prop="postCode" show-overflow-tooltip label="岗位编码" align="center" header-align="center" min-width="140">
           </el-table-column>
          <el-table-column prop="postBase" show-overflow-tooltip label="岗位基数" align="left" header-align="center" >
              <template v-slot="scope" >
                <el-form-item :prop="`tableData.${scope.$index}.postBase`" :rules="[{validator:$validateUtil.dynamic,prop:'postBase',row:scope.row,ruleType:''}]">
                  <el-input-number  :controls="false" v-model.trim="scope.row.postBase" placeholder="请输入" class="w100"  @change="changPostBase(scope.row.postBase)"></el-input-number>
                </el-form-item>
              </template>
          </el-table-column>
          <el-table-column prop="postRatio" show-overflow-tooltip label="岗位系数" align="left" header-align="center" >
            <template v-slot="scope" >
              <el-form-item :prop="`tableData.${scope.$index}.postRatio`" :rules="[{validator:$validateUtil.dynamic,prop:'postRatio',row:scope.row,ruleType:''}]">
                <el-input-number  :controls="false" v-model.trim="scope.row.postRatio" placeholder="请输入" class="w100"  @change="changPostRatio(scope.row.postRatio)"></el-input-number>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
        </el-form>
      </template>
      <template slot="right">
      </template>
    </flexible>

  </basic-container>
</template>

<script>
import flexible from "@/views/bonusmanage/components/flexible";
import {getRatiosOfPost} from '@/api/bonus/basic'
import {getJiangJinBm} from "@/api/admin/dept";
import {saveBatchPostRatio} from "@/api/bonus/basic";
export default {
  name: "index",
  components:{
    flexible
  },
  watch: {

  },
  computed: {

  },
  data(){
    return{
      loading:false,
      leftCols:24,
      fzbmData:{} ,
      formData:{
        tableData:[],
      },
      searchForm: {
        name: '',
      },
      deptId:'',
      chooseList:[]
    }
  },
  created(){
    this.getJiangJinJg() ;
  },
  methods: {
    //获取奖金管理人机构
    getJiangJinJg() {
      this.loading = true ;
      getJiangJinBm().then(res => {
        if (res.data.data != null && res.data.data.length > 0) {
          this.deptId = res.data.data[0].deptId;
          this.deptName = res.data.data[0].deptName;
          this.fzbmData = res.data.data;
          this.getRatiosOfPost() ;
        } else {
          this.$notify.error("没有相关负责部门")
        }
        this.loading = false ;
      }).catch(err =>{
        this.loading = false ;
      });
    },
    switchDepartment(val){
      this.getRatiosOfPost() ;
      this.$forceUpdate() ;
    },
    getRatiosOfPost(){
      if (!this.deptId) return ;
      this.loading = true ;
      getRatiosOfPost(this.deptId).then(res=>{
        if (res.data.code == 0){
          this.formData.tableData = res.data.data
        }else{
          this.$message.error('获取失败')
        }
        this.$nextTick(()=>{
          this.$refs.tableRef.doLayout() ;
        })
        this.loading = false ;
      }).catch(err=>{
        this.loading = false ;
      })
    },
    handleSubmit(){
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.loading = true ;
          saveBatchPostRatio(this.formData.tableData).then(res=>{
            if (res.data.code == 0){
              this.$message.success('保存成功')
              this.getRatiosOfPost() ;
            }
            this.loading = false ;
          }).catch(()=>{
            this.loading = false ;
          })

        } else {
          return false;
        }
      });
    },
    handleSelectionChange(list){
      this.chooseList = list;
    },
    //批量修改基数
    changPostBase(val){
      this.chooseList.forEach(ele=>{
        ele.postBase = val;
      })
    },
    //批量修改系数
    changPostRatio(val){
      this.chooseList.forEach(ele=>{
        ele.postRatio = val;
      })
    },
  }
}
</script>

<style scoped>

</style>
